<template>
  <div
    class="main-container"
    :style="{
      'max-width': proxy.bodyMaxWidth + 'px',
      'min-width': proxy.bodyMinWidth + 'px',
    }"
  >
    <div class="header">页面导航栏</div>
    <div class="header-fixed" v-if="showFixedHeader">滑动时固定的导航栏</div>
    <div class="body-inner"></div>
  </div>
</template>

<script setup>
import {
  ref,
  reactive,
  getCurrentInstance,
  nextTick,
  watch,
  onMounted,
} from "vue";
import { useRoute, useRouter } from "vue-router";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();

// 监听滚动条，向下滑动一定距离时让顶部固定的导航栏显示
const showFixedHeader = ref(false);
onMounted(() => {
  window.addEventListener("scroll", () => {
    var scrollTop = window.scrollY;
    if (scrollTop > 20) {
      showFixedHeader.value = true;
    } else {
      showFixedHeader.value = false;
    }
  });
});
</script>

<style>
body {
  background: rgb(189, 187, 187) !important;
}
</style>

<style lang="scss" scoped>
.main-container {
  background: #fff;
  min-height: calc(100vh);
  margin: 0px auto;
  .header {
    background: #94cc97;
    width: 100%;
  }
  .header-fixed {
    position: fixed;
    top: 0px;
    margin: 0px auto;
    background: #80a0b9;
    width: 100%;
  }
  .body-inner {
    height: 10000px; // 将页面撑大，让滚动条出现，测试导航栏显示情况
  }
}
</style>
